<template>
<div :class="[$style.container]">
<el-dialog title="同步详情" :visible.sync="visible" width="480px">
  <el-form size="small" label-position="left" :rules="rules" :model="form" @submit.native.prevent="" ref="fm">
    <el-form-item prop="name" label="同步盘名称">
      <el-input placeholder="请填写同步盘名称" v-model="form.name"></el-input>
    </el-form-item>
    <!-- <el-form-item prop="period" label="同步周期(s)">
      <el-input-number placeholder="请填写同步周期" v-model.number="form.period" :min="10"></el-input-number>
    </el-form-item> -->
    <el-form-item prop="type" label="类型">
      <el-radio-group v-model="form.type">
        <el-radio :label="row.value" :disabled="row.disabled" v-for="row in types" :key="row.value">{{row.label}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="禁用监听" v-if="form.type == 'up'">
      <span v-if="form.disabledListen">是</span>
      <span v-else>否</span>
    </el-form-item>
    <el-divider></el-divider>
    <el-form-item label="云端文件夹" v-if="row">
      <span class="text-secondary">{{doc && doc.path}}</span>
    </el-form-item>
    <el-form-item label="本地文件夹" v-if="row">
      <span class="text-secondary">{{row.localPath}}</span>
    </el-form-item>
  </el-form>
  <span slot="footer">
    <el-button size="small" @click="onCancel" class="px-5">取 消</el-button>
    <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">保 存</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang="ts">

import { ModalMixins } from '@/mixins'
import { mixins } from 'vue-class-component'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { remote } from 'electron'
import { getDocById } from '@/api/doc'

@Component
export default class EditModal extends mixins(ModalMixins) {
  @Ref() fm!: any

  @Prop() beforeConfirmFn!: (data: any) => Promise<any>

  row: any = null

  doc: any = null

  types = [
    { label: '单向上传', value: 'up' },
    { label: '单向下载', value: 'down', disabled: true },
    { label: '双向同步', value: 'duplex', disabled: true }
  ]

  form = {
    type: 'up',
    name: '',
    period: 10,
    disabledListen: false
  }

  rules = {
    name: [
      { required: true, message: '请填写同步盘名称', trigger: 'change' }
    ]
    // ,
    // period: [
    //   { required: true, type: 'number', message: '请填写同步周期', trigger: 'change' }
    // ]
  }

  get rowTypeText () {
    return this.types.find(v => v.value === this.form.type)?.label || ''
  }

  open (row: any) {
    this.row = row || null
    if (this.fm) this.fm.resetFields()
    this.form = {
      type: row?.type || 'up',
      name: row?.name || '',
      period: row?.period || 10,
      disabledListen: row?.disabledListen
    }
    this.loadDoc()
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    this.fm.validate().then((valid: boolean) => {
      if (!valid) return
      Object.assign(this.row, this.form)
      this.visible = false
      if (this.resolve) this.resolve(this.row)
    })
  }

  loadDoc () {
    if (!this.row) {
      this.doc = null
    } else {
      getDocById(this.row?.docId).then(data => {
        this.doc = data || null
      })
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

</style>
